<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/5/7
  Time: 16:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script>
    $(function () {
        chaxun();
    });

    function chaxun() {

        $.ajax({
            url: '/navSelect',//代表访问后台的地址
            type: 'get',//代表访问后台的类型
            dataType: 'json',//从后台传递到前端数据类型必须为json对象，
            // {{"href":"/home","title":"网站首页"}，{"href":"/home","title":"网站首页"}}
            success: function (data) {
                var html = '';
                for (var i = 0; i < data.length; i++) {
                    let status = data[i].status;
                    status = status == 1 ? "启用" : "停用";
                    html += '<tr>\n' +
                        '        <td>' + data[i].id + '</td>\n' +
                        '        <td>' + data[i].href + '</td>\n' +
                        '        <td>' + data[i].title + '</td>\n' +
                        '        <td>' + status + '</td>\n' +
                        '        <td><input type="button" value="编辑" onclick="update(' + data[i].id + ')"> <input type="button" value="删除" onclick="del(' + data[i].id + ')"> </td>\n' +
                        '    </tr>';
                }
                //可以点击的，可以是按钮，可以是a标签 
                $("#navTable").html(html);
            }
        })
    }

    //更新信息，必须得到当前数据
    //需要更具Id去数据库里面进行查询
    //js将值传递到其他页面，暂时两个方法 sessionStorage  localStorage 用法和request差不多 都是key  value的形式
    function update(id) {
        localStorage.setItem("navId", id);//将id传入到本地,这个key应该在这个项目里面唯一
        $('#homeright').load('/back/navUpdate.jsp');
    }

    function del(id) {
        //点击删除时，当前数据没有了，需要去查询一次数据库
        $.ajax({
            url: '/navDelete',
            data: {id: id},//json对象
            dataType: 'json',//返回值类型
            type: 'post',//一般情况下所有增加，修改，删除都用post，查询用get
            success: function (data) {
                if (data == 1) {
                    chaxun();
                } else {
                    alert("很遗憾，删除失败!!!");
                }
            }
        })
    }

</script>
<body>
<table class="table table-hover">
    <thead>
    <tr>
        <td>id</td>
        <td>连接</td>
        <td>标题</td>
        <td>状态</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody id="navTable">
    <%--    <c:forEach items="${list}" var="aa">--%>
    <%--        <tr>--%>
    <%--            <td>${aa.id}</td>--%>
    <%--            <td>${aa.href}</td>--%>
    <%--            <td>${aa.title}</td>--%>
    <%--        </tr>--%>
    <%--    </c:forEach>--%>
    </tbody>
</table>

</body>
</html>
